<script setup lang="ts">
import { ref } from 'vue';
import { useRouterPush } from '@/composables';
import { useGetOpenid, useNurseAuthLogin, useNurseGetAuthInfo } from '@/hooks';
import { hideLoading, showLoading, showToast, setClipboardData } from '@tarojs/taro';
import { useNurseStore, useNursesStore } from '@/store';
import { storeToRefs } from 'pinia';
import { useNurses } from '@/service';
import { localStg } from '@/utils';

definePageConfig({
    navigationBarTitleText: '护工登录页'
});

const { openid } = storeToRefs(useNursesStore());

const { toLogin, toHome } = useRouterPush();

const { company, qrCodeUrl } = storeToRefs(useNurseStore());

const encode = ref('');

const { getEncode } = useNurses();

async function gotologin() {
    localStg.remove('nurseUser');
    localStg.remove('openid');

    showLoading({ title: '正在登录...' });

    let flag = await useGetOpenid();

    if (flag) {
        flag = await useNurseAuthLogin();
        if (!flag) return;
        await useNurseGetAuthInfo();
        toHome();
    } else {
        hideLoading();
        showToast({
            title: '取护工信息失败',
            icon: 'success',
            duration: 1500
        });
    }
    hideLoading();
}
const show = ref(false);

const modelValue = ref(1);

async function empower() {
    showLoading({ title: '正在获取用户信息...' });

    const flag = await useGetOpenid();

    if (flag && openid) {
        const { error, success } = await getEncode(openid.value);
        if (!error && success) {
            encode.value = success;
            show.value = true;
        }
        hideLoading();
    } else {
        hideLoading();
        showToast({
            title: '取用户信息失败',
            icon: 'error',
            duration: 3000
        });
    }
}

function copy() {
    setClipboardData({ data: encode.value });
}
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar title="护工登录页" show-left /> -->
        <view class="w-375px h-full flex-col-center fixed-lt">
            <view class="w-375px h-full flex-col-center">
                <view class="w-260px h-full flex-col-center">
                    <nut-avatar :size="100" @click="toLogin"><img class="bg-#fff shadow"
                            :src="company.logo" /></nut-avatar>
                    <view class="mt-3 font-bold text-lg text-#000">{{ company.departName }}</view>
                    <view class="mt-3 text-#000">{{ company.fax }}</view>
                    <view class="mt-3 font-bold text-#059669">
                        <view class="w-280px flex-center justify-around mt-3">
                            <view
                                class="bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 w-120px b-rounded-2 h-60px flex-center justify-around">
                                <view class="flex-col-center">
                                    <view class="i-local-online w-30px h-30px text-#059669" />
                                </view>
                                <view class="flex-col-center">
                                    <view class="">线上申请</view>
                                    <view class="">居家服务</view>
                                </view>
                            </view>
                            <view
                                class="bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 w-120px b-rounded-2 h-60px flex-center justify-around">
                                <view class="flex-col-center">
                                    <view class="i-local-protect w-30px h-30px text-#059669" />
                                </view>
                                <view class="flex-col-center">
                                    <view>专业医护</view>
                                    <view>安全放心</view>
                                </view>
                            </view>
                        </view>
                        <view class="w-280px flex-center justify-around mt-3">
                            <view
                                class="bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 w-120px b-rounded-2 h-60px flex-center justify-around">
                                <view class="flex-col-center">
                                    <view class="i-local-medal w-30px h-30px text-#059669" />
                                </view>
                                <view class="flex-col-center">
                                    <view>管理完善</view>
                                    <view>服务规范</view>
                                </view>
                            </view>
                            <view
                                class="bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70 w-120px b-rounded-2 h-60px flex-center justify-around">
                                <view class="flex-col-center">
                                    <view class="i-local-service w-30px h-30px text-#059669" />
                                </view>
                                <view class="flex-col-center">
                                    <view>三方投保</view>
                                    <view>防控风险</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="mt-6 w-full flex-col-center">
                        <nut-button color="#059669" size="large" class="important:w-280px font-bold" @click="gotologin">
                            护工登录
                        </nut-button>
                        <view class="my-6 text-#059669" @click="empower">获取授权码</view>
                    </view>
                </view>
            </view>
        </view>
        <nut-popup v-model:visible="show" round>
            <view class="w-360px h-300px flex-col justify-start items-center">
                <nut-tabs v-model:modelValue="modelValue" class="w-360px h-40px">
                    <nut-tab-pane title="授权码" pane-key="1"></nut-tab-pane>
                    <!-- <nut-tab-pane title="二维码" pane-key="2"></nut-tab-pane> -->
                </nut-tabs>
                <view class="flex-col-center w-360px h-260px">
                    <!-- <view v-if="modelValue == 1" class="flex-col-center  items-center  w-full h-full overflow-hidden">
                        <nut-ellipsis user-select class="h-200px" direction="start" :content="encode"
                            :rows="3"></nut-ellipsis>
                        <nut-button @click="copy" class=" important:w-150px font-bold text-lg"
                            type="primary">复制授权码</nut-button>
                    </view> -->

                    <view v-if="modelValue == 1 && openid" class="flex-col-center w-full h-full">
                        <image class="w-200px h-200px"
                            :src="`${qrCodeUrl}/nurse_nurses/nurseNurses/getQRCode/${openid}`"></image>
                        <view class="w-full h-60px flex-col-center">
                            <nut-button class="important:w-150px font-bold text-lg" type="primary" @click="copy">
                                复制授权码
                            </nut-button>
                        </view>
                    </view>
                </view>
            </view>
        </nut-popup>
    </basic-layout>
</template>
